<template>
    <el-card class="bread-crumb">
      <h3>投屏内容规划中...</h3>
    </el-card>
    <div id="screen"></div>
</template>
<script setup>
import * as THREE from 'three';
import { onMounted } from 'vue';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.3, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 700 );
onMounted(()=>{
  document.getElementById("screen").appendChild( renderer.domElement );
  // 几何体
  const geometry = new THREE.BoxGeometry( 10, 10, 10 );
  // 材质   wireframe  线性   transparent,opacity  设置透明度
  // 基础网格材质MeshBasicMaterial不会受到光照影响
  // 漫反射网格材质MeshLambertMaterial会受到光照影响
  const material = new THREE.MeshLambertMaterial( { 
    color: 0xFFFFF1CF , 
    // wireframe: true,
    transparent: true,
    opacity: 0.7
  } );  
  const pointLight = new THREE.PointLight(0xFFF47983, 10);  
  pointLight.position.set(4, 4, 4);
  scene.add(pointLight);
  // 网格模型
  const cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
  // 辅助观察坐标系
  // const axesHelper = new THREE.AxesHelper(150);
  // scene.add(axesHelper);
  camera.position.set(1.1,0.9988,50);
  camera.lookAt(0,0,0);
  const animate = () => {
    requestAnimationFrame( animate );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
  };
  animate();
  // 使用相机控件
  // OrbitControls本质上就是改变相机的参数，
  // 比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，
  // 实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围
  // cube.rotation 模型的角度属性，与使用相机控件是两个不同的使用物体转动的方式
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', function(){
    renderer.render(scene, camera);
  })
});
// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
    // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
    // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix();
};


// 随机创建大量的模型,测试渲染性能
const num = 1000; //控制长方体模型数量
for (let i = 0; i < num; i++) {
    const geometry = new THREE.BoxGeometry(10, 5, 5);
    const material = new THREE.MeshBasicMaterial({
        color: 0x00ffff
    });
    const mesh = new THREE.Mesh(geometry, material);
    // 随机生成长方体xyz坐标
    const x = (Math.random() - 0.5) * 200
    const y = (Math.random() - 0.5) * 200
    const z = (Math.random() - 0.5) * 200
    mesh.position.set(x, y, z)
    scene.add(mesh); // 模型对象插入场景中
}


</script>
<style>

</style>